<template>
  <div>
    <listPage
    ref="listPageRef"
    pageTitle="存桶管理"
    :btnList="btnList"
    :addBtnList="addBtnList"
    :tableData="tableData"
    :allColumn="tableColumn"
    :tableColumn="showColumn"
    @setColumn="(val)=>{showColumn=val}"
    ></listPage>
    <!-- 修改配额弹窗 -->
    <pdlog v-model="showEdit" width="418px" title="扩容" @comfirm="showEdit = false" @cencel="showEdit = false">
      <div class="edit-dialog">
        <div class="name">桶配额</div>
        <el-input-number style="width:215px;" size="small" v-model="editValue" :min="1" ></el-input-number>
        <span style="margin-left: 3px;">GB</span>
      </div>
    </pdlog>
    <!-- 存储类别弹窗 -->
    <pdlog v-model="showLog" width="581px" title="存储类别" @comfirm="showLog=false" @cencel="showLog = false">
      <div class="edit-dialog">
        <div class="name">存储类别</div>
        <el-radio-group v-model="logValue">
          <el-radio :label="1">标准存储</el-radio>
          <el-radio :label="2">低频访问存储</el-radio>
          <el-radio :label="3">归档存储</el-radio>
        </el-radio-group>
      </div>
    </pdlog>
    <!-- 消息弹窗 -->
    <pdlog v-model="showTip" width="418px" :title="tipName" @comfirm="showTip = false" @cencel="showTip = false">
      <div class="btn-msg">
        请确认是否进行{{tipName}}？
      </div>
    </pdlog>
  </div>
</template>

<script>
  import listPage from '@/components/listPage'
  import {getStroageSilo} from '@/api/pageList'
  
  export default {
    data() {
      return {
        tipName:'',
        showTip:false,
        addBtnList:[{
            id:1,
            name:'创建桶',
            handle:this.handleAdd
          }],
        btnList:[
          {
            id:1,
            name:'删除',
            handle:()=>this.handleClick('删除')
          },
        ],
        options: [
          
        ],
        showLog: false, // 控制台弹窗
        logValue: null, // 控制台值
        editValue: null, // 编辑值
        showEdit: false, // 编辑弹窗
        showColumn: [], // 展示列
        tableColumn: [{
            field: "name",
            label: "名称",
          },
          {
            field: "storage_type",
            label: "存储类别",
            sortable: true
          },
          {
            field: "ava_part",
            label: "区域",
            sortable: true

          },
          {
            field: "dataRedStorage",
            label: "数据冗余存储策略",
            sortable: true
          },
          {
            field: "storage_capa",
            label: "存储用量",
            sortable: true
          },
          {
            field: "object_num",
            label: "对象数量",
            sortable: true
          },
          {
            field: "create_time",
            label: "创建时间",
            sortable: true
          },
          {
            field: "operation",
            type: "handler",
            label: "操作",
            width:300,
            btnlist: [{
                name: '修改存储类别',
                handle: this.handleLog
              },
              {
                name: '对象管理',
                handle: ()=>{this.$router.push({path:'/saveresource/objManage'})}
              },
              {
                name: '修改配额',
                handle: this.handleEdit
              },
            ]
          },
        ],
        tableData: [],
      }
    },
    components: {
      listPage
    },
    created() {
      this.init()
    },
    methods: {
      init(){
        this.showColumn = this.tableColumn
        this.getData()
      },
      getData(params={}){
        // console.log('~~~~~~~~~',params)
        // 请求
        getStroageSilo().then(res => {
          if(res.code==200){
            let data = JSON.parse(res.data)
            this.tableData = data
            console.log('~~~~~~',this.tableData);
          }
        })
      },
      handleAdd() {
        console.log('跳转新增页');
        this.$router.push({
          path: '/saveresource/backetSaveAdd'
        })
      },
      selectedData(){
        return this.$refs.listPageRef.getSelectedData()
      },
      handleClick(name) {
        this.tipName = name
        // 获取选中数据
        let selectRow = this.selectedData()
        console.log('@@@@@@',)
        this.showTip = true

        // this.$axios.get('http://47.95.194.212:6601/api/physical').then(res=>{
        //   console.log('@@@@@',res)
        // })
      },
      handleccc() {
        console.log('6666666666666');
      },
      setTable() {
        this.$refs.settingTable.init()
      },
      handleLog(index, row) {
        console.log(index, row);
        this.showLog = true
      },
      handleEdit(index, row) {
        console.log(index, row);
        this.showEdit = true
      },
      handleDetail(index, row) {
        console.log(index, row);
      },
    }
  }
</script>

<style scoped lang="less">
  .edit-dialog {
    margin: 0px 20px 10px;
    display: flex;
    align-items: center;
    .name {
      font-weight: 650;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.847058823529412);
      margin-right: 35px;
    }
    .el-input {
      width: 233px;
    }
  }
</style>
